<template>
  <div class="pay_view" v-if="details">
    <p>
      <span>金额: </span><span style="color: red">￥ {{ details.sum }}</span>
    </p>
    <div class="pay_block" v-if="details.payStatus == -1">
      <el-button
        style="width: 100%"
        size="large"
        type="primary"
        @click="handlePay"
        ><img
          class="alipay_icon"
          src="/ali.png"
          alt=""
          srcset=""
        />支付宝支付</el-button
      >
    </div>
    <div v-else>已支付</div>
    <!-- <el-button type="primary" @click="handleGeneratePay"
      >生成支付二维码</el-button
    >
    <img v-if="qrUrl" width="100" height="100" :src="qrUrl" alt="" /> -->
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import axios from "@/request";
import dayjs from "dayjs";
import { useRoute } from "vue-router";

const route = useRoute();
const details = ref();
const qrUrl = ref("");
const form = reactive({
  out_trade_no: dayjs().valueOf(), // 订单号
  total_amount: "", // 总价格
  subject: "统筹服务",
});
const orderId = route.query.id;
// 查询
const handleQueryDetails = () => {
    axios
    .get(`/api/order/${orderId}`)
    .then((result) => {
      const { status, data } = result;
      if (status === 200) {
        details.value = data;
      }
    })
    .catch((err) => {});
};
handleQueryDetails();
// 支付
const handlePay = () => {
    console.log(details.value, details.value.order, details.value.sum);
  if (details.value.order && details.value.sum) {
    axios
      .post(`/api/pay/payment`, {
        out_trade_no: details.value.order, // 订单号
        total_amount: details.value.sum, // 总价格
        subject: "统筹服务",
      })
      .then((result) => {
        const { status, data } = result;
        if (status === 200) {
          if (data) {
            window.location.href = data.paymentUrl;
          }
        }
      })
      .catch((err) => {});
  }
};
// 生成支付二维码
const handleGeneratePay = () => {
  let body = {
    out_trade_no: dayjs().valueOf(), // 订单号
    total_amount: form.total_amount, // 总价格
    subject: "统筹服务",
    type: 2,
  };
  axios
    .post(`/api/pay/payment`, body)
    .then((result) => {
      const { status, data } = result;
      if (status === 200) {
        if (data) {
          qrUrl.value = data.paymentUrl;
        }
      }
    })
    .catch((err) => {});
};
</script>

<style scoped>
.pay_view {
    padding: 10px;
}
.pay_block {
    margin: 20px 0;
}
.alipay_icon {
  width: 20px;
}
</style>